<template>
  <div class="finish-com15">
    <div ref="maychar" style="width:500px;height:250px;background-color: rgba(0,0,0,0);" class="finish-item">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['scenic'],
  data() {
    return {
      bar: [],
      line: [],
      timeData: [],
    }
  },
  watch: {
    scenic(val) {
      this.fetchData(val);
    }
  },
  mounted() {
    this.fetchData(this.scenic);
  },
  methods: {
    fetchData(scenic) {
      this.$axios.post('/api/forewarning/passengerOverloadWarning', {
        scenery_id: scenic
      })
        .then(response => {
          const data = response.data.data;
          this.bar = data.passenger_flow_minute_data;
          this.line = data.passenger_flow_minute_data;
          this.timeData = data.time_data;
          this.getCharts();
        })
        .catch(error => {
          console.error('Failed to fetch chart data:', error);
        });
    },
    getCharts() {
      const chartBox = echarts.init(this.$refs.maychar);
      const option = {
        grid: {
          left: '2%',
          right: '4%',
          top: '15%',
          bottom: '0',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: '人',
            type: 'value',
          },
        ],
        series: [
          {
            name: '景区人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: this.bar,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#01b0e6'
                }, {
                  offset: 1,
                  color: 'rgba(0,0,0,0)'
                }]),
              }
            },
          },
          {
            name: '景区人数',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: this.line,
          },
        ]
      };
      chartBox.setOption(option);
      window.addEventListener("resize", function () {
        chartBox.resize();
      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped></style>
